<template>
	<view class="tomb-binding" >
		<view class="mb-26" >
			<span>合同</span>
			<u-input v-model="value" :type="type" :border="true" placeholder="请输入墓位合同编号" />
		</view>
		<view class="mb-26" >
			<span>电话</span>
			<view>
				<u-input v-model="phone" :type="type" :border="true" placeholder="请输入合同家属电话" />
				<span class="send-code" >发送验证码</span>
			</view>
		</view>
		<view class="mb-26" >
			<span>验证码</span>
			<u-input v-model="code" :type="type" :border="true" placeholder="请输入验证码" />
		</view>
		
		<view class="add-btn" >
			<span @click="goTo_tombCertification" >绑定</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				phone:'',
				code:''
			};
		},
		methods:{
			// 跳转 墓位认证页面
			goTo_tombCertification(){
				this.$u.route({
					url:'/pages/view/tombCertification/tombCertification'
				})
			}
		}
	}
</script>

<style lang="less">
.tomb-binding{
	font-size: 28upx;
	padding: 0 40upx;
	view{
		display: flex;
		align-items: center;
		u-input{
			flex: 1;
		}
		span{
			width: 160upx;
		}
		.send-code{
			width: 160upx;
			color: #ffffff;
			font-size: 24upx;
			background: #08ac56;
			text-align: center;
			padding: 10upx 0;
			border-radius: 6upx;
			margin-left: 26upx;
		}
	}
	
	.mb-26{
		margin-bottom: 26upx;
	}
	
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 40upx;
		margin-top:90upx;
		margin-bottom: 30upx;
		span{
			font-size: 28upx;
			color: #ffffff;
			background: #f9c38c;
			padding: 14upx 26upx;
			border-radius: 6upx;
		}
	}
}
</style>
